.attributes-box {
	box-sizing: border-box;
	background-color: #fff;
	width: 310px;
	height: 100%;
	overflow: hidden;

	&[action=true] {
		width: 40px;
		transition: width .5s;

		.content {
			display: none;
		}

		.title {

			.text {
				display: none;
			}

			.fold {
				padding: 5px 11px;
				margin: 0 -3px;
				transform: rotate(180deg);
				transition: all .2s;
			}
		}
	}

	.attributes {
		padding: 2px 2px;
		height: calc(100% - 40px);
		overflow: hidden;
		box-sizing: border-box;

		.content {
			height: 100%;
			padding: 3px 3px;
			margin-bottom: 70px;
			box-sizing: border-box;
			overflow-y: auto;

			&::-webkit-scrollbar-thumb {
				backdrop-filter: blur(5px);
				background-color: rgba(23, 23, 23, 0.3);
			}

			&::-webkit-scrollbar {
				background-color: transparent;
			}
		}
	}


	.title {
		font-size: 18px;
		height: 40px;
		display: flex;
		align-items: center;
		padding: 0 5px;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		justify-items: flex-start;
		box-sizing: border-box;

		.text {
			display: flex;
			height: 100%;
			box-sizing: border-box;

			.item {
				height: 100%;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				align-content: center;
				box-sizing: border-box;

				&.select {
					border-bottom: 2px solid #0052cc;
				}

				&:nth-child(2) {
					margin-left: 5px;
				}

				&:hover {
					color: #0052cc;
				}
			}
		}

		.fold {
			padding: 2px 10px;
			border-radius: 7px;
			cursor: pointer;

			i {
				transform: rotate(-90deg);
			}

			&:hover {
				background-color: #eee;
				color: #0052cc;
				transition: box-shadow 0.5s, background-color 0.6s;
			}
		}
	}
}